<template>
  <div :style="calcStyle">
    <template v-for="(cell, index) in Cells" :key="index">
      <DataGridViewCell :cell="cell" :table-index="tableIndex">
      </DataGridViewCell>
    </template>
  </div>
</template>
<script>
import DataGridViewCell from './DataGridViewCell.vue';
import { computed } from 'vue';

export default {
  components: { DataGridViewCell },
  provide() {
    return {
      gridView: computed(() => this.gridView),
    };
  },
  inject: ['manager'],
  props: {
    tableIndex: {
      type: Number,
      default: 0,
    },
  },

  data() {
    return {
    };
  },
  computed: {
    gridView() {
      return this.manager.Body.AllGridViews[this.tableIndex];
    },
    gridViewHeight() {
      let val = 0;
      this.gridView.Rows.forEach(a => {
        val += a.Height;
      });
      return val;
    },
    gridViewWidth() {
      let val = 0;
      this.gridView.Columns.forEach(a => {
        val += a.Width;
      });
      return val;
    },
    calcStyle() {
      const obj = {
        position: 'absolute',
        height: this.gridViewHeight + 'px',
        width: this.gridViewWidth + 'px',
        left: this.gridView.Left + 'px',
        top: this.gridView.Top + 'px',
        border: '1px dotted #cddaea',
        'z-index': this.gridView.ZIndex,
      };
      return obj;
    },
    Cells() {
      return this.gridView.Cells;
    },
  },
  mounted() {

  },
  methods: {

  },
};
</script>
<style>
</style>
